import React, { useEffect, useState } from 'react';
import { Card, Form } from 'react-bootstrap';

const TimeSettings = ({ config, setConfig }) => {
  // 组件内部默认配置
  const defaultTimeConfig = {
    serverTimeAcceleration: 1,
    serverNightTimeAcceleration: 1,
    useStaticTime: false,
    staticTimeHour: 12,
    staticTimeMinute: 0,
    useDBTime: false,
    randomStartTime: 0,
    startTimeMinute: 0
  };

  // 组件内部状态，用于表单输入临时存储
  const [localConfig, setLocalConfig] = useState(defaultTimeConfig);

  // 当外部config变化时，更新内部localConfig
  useEffect(() => {
    const mergedConfig = {
      ...defaultTimeConfig,
      ...config
    };
    setLocalConfig(mergedConfig);
  }, [config]);

  // 处理配置变更，同时更新本地状态和全局配置
  const handleConfigChange = (key, value) => {
    const updatedLocalConfig = {
      ...localConfig,
      [key]: value
    };
    setLocalConfig(updatedLocalConfig);
    
    setConfig({
      ...config,
      [key]: value
    });
  };

  return (
    <Card className="h-100 border-3 shadow-medium" style={{backgroundColor: 'rgba(26, 26, 26, 0.6)', backdropFilter: 'blur(15px)', borderColor: '#d32f2f', boxShadow: '0 0 20px rgba(211, 47, 47, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(211, 47, 47, 0.2)'}}>
      <Card.Header style={{backgroundColor: 'rgba(40, 40, 40, 0.7)', backdropFilter: 'blur(15px)'}}>
        <h3 style={{color: 'var(--primary-color)'}}>时间设置</h3>
      </Card.Header>
      <Card.Body style={{color: '#ffffff', maxHeight: '70vh', overflowY: 'auto'}}>
        {/* 时间速率设置 */}
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>游戏时间速率</Form.Label>
              <Form.Control 
                type="number" 
                min="0.1" 
                max="64" 
                step="0.1" 
                value={localConfig.serverTimeAcceleration}
                onChange={(e) => handleConfigChange('serverTimeAcceleration', parseFloat(e.target.value) || 1)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                服务器时间加速倍数 (0.1-64)，决定游戏内一天的流逝速度
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>夜晚时间速率</Form.Label>
              <Form.Control 
                type="number" 
                min="0.1" 
                max="64" 
                step="0.1" 
                value={localConfig.serverNightTimeAcceleration}
                onChange={(e) => handleConfigChange('serverNightTimeAcceleration', parseFloat(e.target.value) || 1)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                服务器夜晚时间加速倍数 (0.1-64)，与serverTimeAcceleration相乘
              </Form.Text>
            </Form.Group>
          </div>
        </div>
        
        {/* 固定时间设置 */}
        <div className="row mb-4">
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Label>使用固定时间</Form.Label>
              <Form.Check 
                type="switch" 
                checked={localConfig.useStaticTime}
                onChange={(e) => handleConfigChange('useStaticTime', e.target.checked)} 
                style={{color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用后游戏时间将保持固定
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Label>固定时间（小时）</Form.Label>
              <Form.Control 
                type="number" 
                min="0" 
                max="23" 
                value={localConfig.staticTimeHour}
                onChange={(e) => handleConfigChange('staticTimeHour', parseInt(e.target.value) || 12)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                设置固定时间的小时数（0-23）
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Label>固定时间（分钟）</Form.Label>
              <Form.Control 
                type="number" 
                min="0" 
                max="59" 
                value={localConfig.staticTimeMinute}
                onChange={(e) => handleConfigChange('staticTimeMinute', parseInt(e.target.value) || 0)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                设置固定时间的分钟数（0-59）
              </Form.Text>
            </Form.Group>
          </div>
        </div>
        
        {/* 时间模式设置 */}
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                checked={localConfig.useDBTime || false}
                onChange={(e) => handleConfigChange('useDBTime', e.target.checked)} 
                label="使用数据库时间"
                style={{color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                使用数据库中的玩家个人时间
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="randomStartTime" 
                label="随机起始时间" 
                checked={localConfig.randomStartTime === 1} 
                onChange={(e) => handleConfigChange('randomStartTime', e.target.checked ? 1 : 0)} 
                style={{color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                服务器重启时随机设置游戏时间
              </Form.Text>
            </Form.Group>
          </div>
        </div>
        
        {/* 服务器启动时间设置 */}
        <div className="row">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>服务器启动时间（分钟）</Form.Label>
              <Form.Control 
                type="number" 
                min="0" 
                max="59" 
                value={localConfig.startTimeMinute || 0}
                onChange={(e) => handleConfigChange('startTimeMinute', parseInt(e.target.value) || 0)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                设置服务器启动时间分钟（0-59），仅在未启用随机起始时间时生效
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            {/* 预留空间，保持布局平衡 */}
          </div>
        </div>
      </Card.Body>
    </Card>
  );
}

export default TimeSettings;